<template>
  <div class="login-wrapper">
    <!-- 左侧介绍 -->
    <div class="login-left">
      <h1>化学数据研究系统</h1>
      <p>高效管理与分析化学实验数据，提升科研效率</p>
    </div>

    <!-- 右侧登录 -->
    <div class="login-right">
      <div class="login-box">
        <h2>登录系统</h2>
        <input v-model="username" placeholder="用户名" />
        <input v-model="password" type="password" placeholder="密码" />
        <button @click="login">登录</button>
        <p v-if="msg" class="msg">{{ msg }}</p>

        <!-- ✅ 新增注册跳转链接 -->
        <p class="register-link">
          还没有账号？
          <span @click="goRegister">点击注册</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('')
const password = ref('')
const msg = ref('')

const login = async () => {
  try {
    const res = await axios.post('http://10.0.6.212:5000/login', {
      username: username.value,
      password: password.value
    })
    if (res.data.status === 'success') {
      //msg.value = '登录成功！'
      localStorage.setItem('token', res.data.token)
      // 登录成功跳转主页
      setTimeout(() => {
        router.push('/home')  // 或根据实际情况跳转
      }, 1000)
    } else {
      msg.value = res.data.msg
    }
  } catch (err) {
    msg.value = '网络错误或服务器异常'
  }
}

// ✅ 使用 Vue Router 跳转注册页
const goRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
/* 全屏布局 */
.login-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* 左侧背景 */
.login-left {
  flex: 1;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px;
  animation: fadeInLeft 1s ease;
}

.login-left h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.login-left p {
  font-size: 18px;
  line-height: 1.5;
}

/* 右侧登录框 */
.login-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4f5f7;
  animation: fadeInRight 1s ease;
}

.login-box {
  width: 360px;
  padding: 40px 30px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  text-align: center;
  position: relative;
}

.login-box h2 {
  margin-bottom: 30px;
  color: #333;
  font-weight: 600;
}

/* 输入框 */
input {
  width: 100%;
  margin-bottom: 20px;
  padding: 14px 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
  font-size: 15px;
  transition: 0.3s;
}

input:focus {
  border-color: #6e8efb;
  box-shadow: 0 0 8px rgba(110, 142, 251, 0.4);
  outline: none;
}

/* 按钮 */
button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(45deg, #6e8efb, #a777e3);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(110,142,251,0.4);
}

/* 提示信息 */
.msg {
  color: #ff4d4f;
  margin-top: 15px;
  font-size: 14px;
}

/* 注册跳转链接 */
.register-link {
  margin-top: 18px;
  font-size: 14px;
  color: #666;
}

.register-link span {
  color: #6e8efb;
  cursor: pointer;
  font-weight: 600;
  margin-left: 4px;
  transition: color 0.3s;
}

.register-link span:hover {
  color: #a777e3;
}

/* 动画 */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 响应式 */
@media (max-width: 900px) {
  .login-wrapper {
    flex-direction: column;
  }
  .login-left, .login-right {
    flex: unset;
    width: 100%;
    height: 50vh;
  }
  .login-left h1 {
    font-size: 36px;
  }
}
</style>
